.wrapper {
  background: $colorLightBeige;

  .spacing-override {
    padding-top: 0;
  }
}

.click-intercept {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(4px);
}

.configuration-wrapper {
  // Is at same level of navigation in order to hide buttom dock when visible
  z-index: zindex($zLayout, navigation);
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: $colorLightBeige;
  padding: $margin 0;
  max-height: 80vh;
  overflow-y: auto;

  .close {
    @include size(15px, 15px);
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    cursor: pointer;
  }

  .top-display {
    display: flex;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .selection-summary,
  .attribute-name {
    font-family: $notoSans;
    color: $colorGrey;
  }
  .selection-summary {
    font-size: 10px;
    margin-top: 10px;
  }

  .attribute-name {
    font-size: $title-s;
    margin-bottom: 15px;
  }

  .image {
    @include size(150px, 150px);
    margin-right: 15px;
  }

  .selection-category {
    margin: 30px 0;
  }

  .button-container {
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
  }
}
